<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>jsx语法规则</title>
  <style>
    .tit {
      background: skyblue;
      width: 200px;
    }
  </style>
</head>

<body>
  <!-- 准备一个“容器” -->
  <div id="test"></div>
</body>
<!-- react 核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- react 操作dome -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.13.17/babel.min.js"></script>
<script type="text/babel">
  const myId = 'AbCd';
  const myData = 'HelLo,ReAcT'
  // 1. 创建虚拟dome
  const VDOM = (
    <div>
      <h2 className='tit' id={myId.toLocaleLowerCase()}>
        <span style={{ color: '#eee', fontSize: '30px' }}>{myData.toLocaleLowerCase()}</span>
      </h2>
      <input type="text" />
      <good>11112222333</good>
      <Good>22334</Good>
    </div>
  ) // 不需要写引号， 不是字符串
  // 2. 渲染虚拟dome到页面
  ReactDOM.render(VDOM, document.getElementById('test'))
  /*
    jsx 语法规则：
      1.定义虚拟dom时不要写引号。
      2.标签中混入js表达式时要用{}
      3.样式的类名不要用class，要用className
      4.内联样式要用style={{key:value}}的形式
      5.虚拟dom只能有一个根标签
      6.标签必须闭合
      7.标签首字母
        （1）若小写字母开头，则将标签转为html同名标签。若html中无该标签对应的同名元素，则报错（如上面的good标签）;
         (2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
  */
</script>

</html>